<template>
  <q-page padding>
    <q-btn
      color="primary"
      @click="showAddParentForm()"
      :label="$t('Add') + $t('Parent') + $t('Dict')"
    />
    <dc-hierarchy separator="cell" dense :columns="columns" :data="dictTree">
      <template v-slot:body="props">
        <dc-tree-td :treeTd="props" firstTd="sort"></dc-tree-td>
        <td class="text-center">{{ props.item.dict_label }}</td>
        <td class="text-center">{{ props.item.dict_code }}</td>
        <td class="text-center">{{ props.item.dict_ext_1 }}</td>
        <td class="text-center">
          <DcDictCell dictName="statusOnOff" :dictCode="props.item.status" />
        </td>
        <td class="text-center">
          <DcDictCell dictName="source" :dictCode="props.item.source" />
        </td>
        <td class="text-center">
          <div class="q-gutter-xs">
            <q-btn
              dense
              color="primary"
              @click="showEditForm(props.item)"
              :label="$t('Edit')"
            />
            <q-btn
              dense
              color="warning"
              @click="showAddChildrenForm(props.item.dict_code)"
              :label="$t('Add') + $t('Children') + $t('Dict')"
            />
            <q-btn
              dense
              color="negative"
              @click="handleDelete(props.item)"
              :label="$t('Delete')"
            />
          </div>
        </td>
      </template>
    </dc-hierarchy>
    <recordDetail ref="recordDetailDialog" @handleFinish="handleFinish" />
  </q-page>
</template>

<script setup>
import useTableData from "src/composables/useTableData";
import { computed, onMounted } from "vue";
import DcHierarchy from "src/components/DcHierarchy/DcHierarchy.vue";
import { useI18n } from "vue-i18n";
import recordDetail from "./DictRecordDetail.vue";
import { ArrayToTree } from "src/utils/arrayAndTree";

const { t } = useI18n();
const url = {
  list: "dict/get-dict-list",
  delete: "dict/delete-dict-by-id",
};
const columns = computed(() => {
  return [
    { name: "sort", align: "center", label: t("Sort"), field: "sort" },
    {
      name: "dict_code",
      align: "center",
      label: t("Dict") + t("Code"),
      field: "dict_code",
    },
    {
      name: "dict_label",
      align: "center",
      label: t("Dict") + t("Name"),
      field: "dict_label",
    },
    { name: "dict_ext_1", align: "center", label: "Ext1", field: "dict_ext_1" },
    { name: "status", align: "center", label: t("Status"), field: "status" },
    { name: "source", align: "center", label: t("Source"), field: "source" },
    { name: "actions", align: "center", label: t("Actions"), field: "actions" },
  ];
});
const {
  pagination,
  DcDictCell,
  tableData,
  recordDetailDialog,
  showAddForm,
  showEditForm,
  getTableData,
  handleFinish,
  handleDelete,
} = useTableData(url);

onMounted(() => {
  pagination.value.rowsPerPage = 99999;
  getTableData();
});

const dictTree = computed(() => {
  if (tableData.value.length !== 0) {
    return ArrayToTree(tableData.value, "dict_code", "parent_code");
  }
  return [];
});

const showAddParentForm = () => {
  showAddForm();
};
const showAddChildrenForm = (dictCode) => {
  recordDetailDialog.value.formType = "add";
  recordDetailDialog.value.show();
  recordDetailDialog.value.recordDetail.value.parent_code = dictCode;
};
</script>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "DictComp",
});
</script>
